<template>
    <view v-for="(item, index) in selectTabList" :key="index"
          :class="`card`" @click="changeTab(item)">
        <div>
            <div class="p-3px m-w-max-content">
                <div class="opr-icon">
                  <SvgIcon :name="item.svgIcon" class="m-auto tab-svg-fill" :size="item.svgSize"/>
                </div>
                <div class="label-text">{{ item.label }}</div>
            </div>
        </div>
    </view>
  <bar-popup v-model="showLayer" :data="layerTabList" @hide="hidePanel" @tabItem="tabLayer"></bar-popup>
  <bar-popup v-model="showFlip" :data="flipTabList" @hide="hideFlip" useSvgIcon @tabItem="tabFlip"></bar-popup>
</template>

<script setup lang="ts">
import SvgIcon from "@/components/svgIcon/svgIcon.vue";
import {Text} from "leafer-ui";
import BarPopup from "@/views/Editor/layouts/footer/panel/barPopup.vue";
import {useEditor} from "@/views/Editor/app";
const {editor,keybinding} = useEditor()
const showLayer = ref(false)
const showFlip = ref(false)
const selectTabList = [
    {label: '层级', value: 'layer', svgIcon: 'iconfont-layer', svgSize: 20},
    {label: '翻转', value: 'flip', svgIcon: 'iconfont-flip-x', svgSize: 20},
    // {label: '复制', value: '4', svgIcon: 'iconfont-copy', svgSize: 20},
]
const layerTabList = [
    {label: '上移', value: 'up', svgIcon: 'chevron-up', svgSize: '25px'},
    {label: '下移', value: 'down', svgIcon: 'chevron-down', svgSize: '25px'},
    {label: '移至顶层', value: 'toTop', svgIcon: 'chevron-up-double', svgSize: '25px'},
    {label: '移至底层', value: 'toBottom', svgIcon: 'chevron-down-double-s', svgSize: '25px'},
]
const flipTabList = [
    {label: '水平翻转', value: 'x', svgIcon: 'iconfont-flip-x', svgSize: 20},
    {label: '垂直翻转', value: 'y', svgIcon: 'iconfont-flip-y', svgSize: 20},
]
const changeTab = (item: any) => {
    console.log(item)
    if (item.value === 'layer') {
        showLayer.value = true
    }
    if (item.value === 'flip') {
        showFlip.value = true
    }
}
const hidePanel = () => {
    showLayer.value = false
}
const hideFlip = () => {
    showFlip.value = false
}
const tabLayer = (item:any) => {
    if (item.value === 'up'){
        keybinding.trigger('mod+]')
    }else if (item.value === 'down'){
        keybinding.trigger('mod+[')
    }else if (item.value === 'toTop'){
        keybinding.trigger(']')
    }else if (item.value === 'toBottom'){
        keybinding.trigger('[')
    }
}
const tabFlip = (item:any) => {
    const activeObject = editor.getActiveObject()
    if (!activeObject) return
    activeObject.flip(item.value)
}
</script>

<style scoped>

</style>
